<!DOCTYPE html>
<html>
<head>
    <title>画多边形</title>
    <script src="./JS/Vector2.js" type="text/javascript"></script>
</head>
<body>
<canvas id="canvas" width="800" height="400"></canvas>
<script type="text/javascript">
    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");

    function drawRegular(borderCount,position,radius){
        if(borderCount < 3)
            return;

        var theta = 360/borderCount;
        var point = new Vector2(position.x,position.y-radius);
        ctx.beginPath();
        ctx.moveTo(point.x,point.y);
        for(var i=0;i<borderCount;i++){
            point.rotateSelf(position,theta);
            ctx.lineTo(point.x,point.y);
        }
        ctx.closePath();
        ctx.stroke();
    }

//    drawRegular(5,new Vector2(300,300),100);

    var cycle=1000;
    var beginPoint = new Vector2(100,100);
    var radius = 50;
    var borderCount = 3;
    var s = setInterval(function(){
        if(beginPoint.x + radius > c.width){
            beginPoint.x = 100;
            beginPoint.y += 100;
        }
        if(beginPoint.y + radius > c.height){
            clearInterval(s);
            return;
        }
        drawRegular(borderCount,beginPoint,radius);
        borderCount += 1;
        beginPoint.x += 100;
    },cycle);


</script>
</body>
</html>